import React, {Component} from 'react';
import {Carousel, Flex} from "antd-mobile";

interface IPicCarouselProps {
  // 图片数组
  picArr: Array<string>;
  // 关闭悬浮的遮罩层
  onClose: () => void;
}

export default class PicCarousel extends Component<IPicCarouselProps, any> {
  state={
    imgHeight: 0
  };

  render() {
    const { picArr, onClose } = this.props;
    return (
      <Flex className="my-img-carousel" onClick={onClose} justify="center" align="center">
        <Carousel
          autoplay={false}
          infinite>
          {
            picArr.map((pic, index) =>
              <img
                key={`my-img-carousel-${index}`}
                src={pic}
                alt=""
                width="100%"
                height={this.state.imgHeight}
                onLoad={() => {
                  // fire window resize event to change height
                  window.dispatchEvent(new Event('resize'));
                  this.setState({ imgHeight: 'auto' });
                }}
              />
            )
          }

        </Carousel>
      </Flex>
    );
  }
}
